<!Doctype html>
<html>
    <head>    
    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-8-8/esl.js"></script>
    <meta charset="utf-8">
    <style>
        html, body, #main {
            height: 100%;
        }
        body {
            margin: 0px;
            background: -webkit-linear-gradient(#22466F, #452525);
            background: -o-linear-gradient(#22466F, #452525);
            background: linear-gradient(#22466F, #452525);
        }
    </style>
    </head>
    <body>
        <div id="main"></div>
        <script>
            require.config({
                packages: [{
                    name: 'echarts-x',
                    location: '../src',
                    main: 'echarts-x'
                }, {
                    name: 'echarts',
                    location: '../../echarts/src',
                    main: 'echarts'
                }, {
                    name: 'zrender',
                    location: '../../zrender/src',
                    main: 'zrender'
                }, {
                    name: 'qtek',
                    location: '../../qtek/src',
                    main: 'qtek.amd'
                }]
            });

            require([
                'echarts',
                'qtek/core/request',
                'echarts/component/dataRange',
                'echarts-x',
                'echarts-x/chart/map3d'
            ], function (echarts, request) {

                var chart = echarts.init(document.getElementById('main'));

                request.get({
                    url: '../doc/example/data/migration.json',
                    onload: function (data) {
                        data = JSON.parse(data);

                         var option = option = {
                            color: ['gold','aqua','lime'],
                            tooltip : {
                                trigger: 'item',
                                formatter: function(v) {
                                    return v[1].replace(':', ' > ');
                                }
                            },
                            legend: {
                                orient:  'vertical' ,
                                x:'left',
                                y:530,
                                data:['1990-1995','1995-2000', '2000-2005', '2005-2010'],
                                selectedMode: 'single',
                                selected:{
                                    '1995-2000' : false,
                                    '2000-2005': false,
                                    '2005-2010':false
                                },
                                textStyle : {
                                    color: '#fff'
                                }
                            },
                            series : [
                                {
                                    name: '世界地图',
                                    type: 'map3d',
                                    mapType: 'world',
                                    mapBackgroundColor: '',
                                    mapBackgroundImage: '../doc/example/asset/earth.jpg',
                                    hoverable: false,
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true
                                            },
                                            borderWidth: 1,
                                            borderColor: 'yellow',
                                            areaStyle: {
                                                color: 'rgba(0, 0, 0, 0)'
                                            }
                                        }
                                    },
                                    data:[],
                                    markLine : {
                                        smooth:true,
                                        symbol: ['none', 'circle'],  
                                        symbolSize : 1,
                                        itemStyle : {
                                            normal: {
                                                color:'#fff',
                                                borderWidth:1,
                                                borderColor:'rgba(30,144,255,0.5)',
                                                lineStyle:{
                                                    width:0.05,
                                                    type:'solid'
                                                    }
                                            },
                                        },
                                        data : data['line']
                                    },
                                    geoCoord: data['geo']
                                }, //添加背景线

                                {
                                    name: '1990-1995',
                                    type: 'map3d',
                                    mapType: 'world',
                                    data:[],
                                    markLine : {
                                        smooth:true,
                                        effect : {
                                            show: true,
                                            size: 3,
                                            shadowColor: 'yellow'
                                        },
                                        itemStyle : {
                                            normal: {
                                                borderWidth:1
                                            }
                                        },
                                        data : data['1995']
                                    },
                                    markPoint : {
                                        symbol:'emptyCircle',
                                        symbolSize : function(v){
                                            return v/100000
                                        },
                                        effect : {
                                            show: true,
                                            shadowBlur : 0
                                        },
                                        itemStyle:{
                                            normal:{
                                                label:{show:false}
                                            }
                                        },
                                        data : data['1995t']
                                    }
                                },//1990-1995
                                {
                                    name: '1995-2000',
                                    type: 'map3d',
                                    mapType: 'world',
                                    data:[],
                                    markLine : {
                                        smooth:true,
                                        effect : {
                                            show: true,
                                            size: 3,
                                            shadowColor: 'aqua'
                                        },
                                        itemStyle : {
                                            normal: {
                                                borderWidth:1
                                            }
                                        },
                                        data : data['2000']
                                    },
                                    markPoint : {
                                        symbol:'emptyCircle',
                                        symbolSize : function(v){
                                            return v/100000
                                        },
                                        effect : {
                                            show: true,
                                            shadowBlur : 0
                                        },
                                        itemStyle:{
                                            normal:{
                                                label:{show:false}
                                            }
                                        },
                                        data : data['2000t']
                                    }
                                },//1995-2000
                                {
                                    name: '2005-2010',
                                    type: 'map3d',
                                    mapType: 'world',
                                    data:[],
                                    markLine : {
                                        smooth:true,
                                        effect : {
                                            show: true,
                                            size: 3,
                                            shadowColor: 'lime'
                                        },
                                        itemStyle : {
                                            normal: {
                                                borderWidth:1
                                            }
                                        },
                                        data : data['2005']
                                    },
                                    markPoint : {
                                        symbol:'emptyCircle',
                                        symbolSize : function(v){
                                            return v/100000
                                        },
                                        effect : {
                                            show: true,
                                            shadowBlur : 0
                                        },
                                        itemStyle:{
                                            normal:{
                                                label:{show:false}
                                            }
                                        },
                                        data : data['2005t']
                                    }
                                },//2000-2005
                                 {
                                    name: '2000-2005',
                                    type: 'map3d',
                                    mapType: 'world',
                                    data:[],
                                    markLine : {
                                        smooth:true,
                                        effect : {
                                            show: true,
                                            size: 3,
                                            shadowColor: 'lime'
                                        },
                                        itemStyle : {
                                            normal: {
                                                borderWidth:1
                                            }
                                        },
                                        data : data['2005']
                                    },
                                    markPoint : {
                                        symbol:'emptyCircle',
                                        symbolSize : function(v){
                                            return v/100000
                                        },
                                        effect : {
                                            show: true,
                                            shadowBlur : 0
                                        },
                                        itemStyle:{
                                            normal:{
                                                label:{show:false}
                                            }
                                        },
                                        data : data['2005t']
                                    }
                                }//2005-2010
                            ]
                        };

                        chart.setOption(option);
                    }
                });
            });
        </script>
    </body>
</html>